<template>
  <div class="app-container">
    <div class="left-side">
      <!-- MSG List -->
      <el-row class="msg-grids" type="flex" :gutter="20">
        <el-col v-for="grid in msgList" v-if="checkPermission(grid.policy)" :key="grid.key" :span="6">
          <div class="grid-content" @click="routerTo(grid.route)">
            <img :src="grid.image" />
            <span>{{ grid.title }}</span>
            <span class="vals">{{ grid.value }}</span>
          </div>
        </el-col>
      </el-row>
      <!-- CRM List -->
      <div class="title">
        <div
          v-if="
            checkPermission(
              'Crm.CustomerManage.View||Crm.ContactManage||Crm.FollowUpManage.View||Crm.CluePoolManage.View||Crm.DataStatistics.View'
            )
          "
          class="text"
        >
          CRM
        </div>
        <div
          v-if="
            checkPermission(
              'Crm.CustomerManage.View||Crm.ContactManage||Crm.FollowUpManage.View||Crm.CluePoolManage.View||Crm.DataStatistics.View'
            )
          "
          class="text"
        >
          劳保
        </div>
      </div>
      <div class="menu">
        <div class="grids">
          <div v-for="grid in crmList" v-if="checkPermission(grid.policy)" :key="grid.route" class="content">
            <div class="box" @click="routerTo(grid.route)">
              <img class="img" :src="grid.image" />
              <div class="text">{{ grid.title }}</div>
            </div>
          </div>
        </div>
        <div class="grids">
          <div v-for="grid in lpList" v-if="checkPermission(grid.policy)" :key="grid.route" class="content">
            <div class="box" @click="routerTo(grid.route)">
              <img class="img" :src="grid.image" />
              <div class="text">{{ grid.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- User Settings -->
    <div class="right-side">
      <user-card
        @onMyMessage="handleMyMessage"
        @onLoginOut="handleLoginOut"
        @onResetPassword="handleResetPassword"
        @onAppDownload="handleAppDownload"
        @onUserDetails="handleUserDetails"
      />
    </div>
    <!-- 个人资料 -->
    <user-details :visible="userVisible" @close="(event) => (userVisible = event)" />

    <!-- 修改密码 -->
    <reset-password :visible="pwdVisible" @close="(event) => (pwdVisible = event)" />

    <!-- 退出登录 -->
    <login-out :visible="loginVisible" @close="(event) => (loginVisible = event)" />

    <!-- 下载app -->
    <app-download ref="appDownload" :visible="appVisible" @close="(event) => (appVisible = event)" />
  </div>
</template>

<script>
import UserCard from './components/UserCard'
import UserDetails from './components/UserDetails'
import LoginOut from './components/LoginOut'
import ResetPassword from './components/ResetPassword'
import AppDownload from './components/AppDownload'
import { getMessageNumber } from '@/api/message'
import { getAppVersions } from '@/api/appVersion'
import { checkPermission } from '@/utils/central'

export default {
  // 工作台
  name: 'Work',
  components: {
    UserCard,
    LoginOut,
    UserDetails,
    AppDownload,
    ResetPassword
  },
  data: function () {
    return {
      msgList: [
        {
          title: '待我审批',
          image: require('@/assets/images/work/icon-waitAudit.png'),
          route: '/msgCenter/waitAudit',
          key: 'pendingReview',
          value: 0,
          policy: 'CentralControl.WaitedMessage'
        },
        {
          title: '历史审批',
          image: require('@/assets/images/work/icon-historyAudit.png'),
          route: '/msgCenter/historyAudit',
          key: 'historyReview',
          value: 0,
          policy: 'CentralControl.HistoryMessage'
        },
        {
          title: '我的申请',
          image: require('@/assets/images/work/icon-apply.png'),
          route: '/msgCenter/myApply',
          key: 'myApplications',
          value: 0,
          policy: 'CentralControl.MyWaitedMessage'
        },
        {
          title: '消息',
          image: require('@/assets/images/work/icon-msg.png'),
          route: '/msgCenter/myMessage',
          key: 'myMessages',
          value: 0,
          policy: 'CentralControl.MyMessage'
        }
      ],
      crmList: [
        {
          title: '客户',
          image: require('@/assets/images/work/icon-client.png'),
          route: '/customer-app/customer',
          policy: 'Crm.CustomerManage.View'
        },
        {
          title: '联系人',
          image: require('@/assets/images/work/icon-contacts.png'),
          route: '/customer-app/contacts',
          policy: 'Crm.ContactManage.View'
        },
        {
          title: '跟进',
          style: { width: '0.28rem' },
          image: require('@/assets/images/work/icon-follow.png'),
          route: '/customer-app/followManagent',
          policy: 'Crm.FollowUpManage.View'
        },
        {
          title: '公海',
          image: require('@/assets/images/work/icon-openSea.png'),
          route: '/customer-app/openSeaManage',
          policy: 'Crm.CluePoolManage.View'
        },
        {
          title: '统计',
          image: require('@/assets/images/work/icon-total.png'),
          route: '/customer-app/dataStatistics',
          policy: 'Crm.DataStatistics.View'
        },
        {
          title: '',
          image: '',
          route: '',
          policy: 'Crm.DataStatistics.View'
        },
        {
          title: '',
          image: '',
          route: '',
          policy: 'Crm.DataStatistics.View'
        },
        {
          title: '',
          image: '',
          route: '',
          policy: 'Crm.DataStatistics.View'
        },
        {
          title: '',
          image: '',
          route: '',
          policy: 'Crm.DataStatistics.View'
        }
      ],
      lpList: [
        {
          title: '收银台',
          image: require('@/assets/images/work/icon-cashier.png'),
          route: 'laborProtection/cashRegister',
          policy: 'LaborProtection.Cashier'
        },
        {
          title: '订单管理',
          image: require('@/assets/images/work/icon-order.png'),
          route: '/laborProtection/order',
          policy: 'LaborProtection.Orders'
        },
        {
          title: '商品管理',
          image: require('@/assets/images/work/icon-commodity.png'),
          route: '/laborProtection/commodityManage',
          policy: 'LaborProtection.Products'
        },
        {
          title: '库存管理',
          image: require('@/assets/images/work/icon-inventory.png'),
          route: '/laborProtection/inventoryControl',
          policy: 'LaborProtection.ProductInventory||LaborProtection.ProductInventoryLog'
        },
        {
          title: '报表管理',
          image: require('@/assets/images/work/icon-statement.png'),
          route: '/laborProtection/reportManagement',
          policy: 'LaborProtection.Employee.ConsumeStatistics'
        },
        {
          title: '优惠券管理',
          image: require('@/assets/images/work/icon-coupon.png'),
          route: '/laborProtection/couponManage',
          policy: 'LaborProtection.CouponRecord||LaborProtection.Coupon'
        },
        {
          title: '系统设置',
          image: require('@/assets/images/work/icon-system.png'),
          route: '/laborProtection/costOrgRelation',
          policy:
            'LaborProtection.APICostOrgRelation||LaborProtection.Employee||LaborProtection.LoginLog||LaborProtection.UserAmountDisStandard'
        },
        {
          title: '',
          image: '',
          route: '',
          policy:
            'LaborProtection.APICostOrgRelation||LaborProtection.Employee||LaborProtection.LoginLog||LaborProtection.UserAmountDisStandard'
        },
        {
          title: '',
          image: '',
          route: '',
          policy:
            'LaborProtection.APICostOrgRelation||LaborProtection.Employee||LaborProtection.LoginLog||LaborProtection.UserAmountDisStandard'
        }
      ],
      // 个人信息
      userVisible: false,
      // 修改密码
      pwdVisible: false,
      // 退出登录
      loginVisible: false,
      // 下载app
      appVisible: false
    }
  },
  created() {
    this.getMessageNumber()
    // this.getAppUrlDownload()
  },
  methods: {
    checkPermission,
    checkPermission(value){
      return true
    },
    getMessageNumber() {
      getMessageNumber().then((res) => {
        const data = res && res.data
        for (const i in data) {
          this.msgList.find((_i) => _i['key'] == i)['value'] = data[i]
        }
      })
    },
    routerTo(url) {
      this.$router.push({ path: url })
    },
    handleMyMessage() {
      this.$router.push({ path: '/msgCenter/myMessage' })
    },
    handleUserDetails($event) {
      this.userVisible = $event
    },
    handleLoginOut($event) {
      this.loginVisible = $event
    },
    handleResetPassword($event) {
      this.pwdVisible = $event
    },
    async handleAppDownload($event) {
      await this.$refs.appDownload.init()
      this.appVisible = $event
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin flex-f-a($justify, $align) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

.title {
  display: flex;
  gap: 20px;

  font-style: normal;
  margin: 0.27rem 0 0.14rem 0;
  .text {
    width: 50%;
    font-size: 22px;
    color: #333333;
  }
}

.app-container {
  padding: 20px 10px;
  @include flex-f-a(flex-start, flex-start);
  .left-side {
    margin-right: 0.3rem;
    flex: 1;
  }
  .right-side {
    width: 3.2rem;
  }
}

.msg-grids,
.crm-grids {
  .grid-content {
    @include flex-f-a(flex-start, center);
    cursor: pointer;
    padding: 0.4rem;
    box-sizing: border-box;
    height: 1.1rem;
    background: #ffffff;
    border-radius: 0.08rem;
    img {
      width: 0.28rem;
    }
    span {
      font-size: 0.18rem;
      color: #666666;
      font-style: normal;
      margin-left: 0.25rem;
    }
    span.vals {
      font-size: 0.28rem;
      color: #222222;
      text-align: right;
      font-style: normal;
      flex: 1;
    }
  }
}

.crm-grids {
  display: flex;
  background: #fff;
  .el-col {
    max-width: 2rem;
    border-radius: 0;
    span {
      font-size: 0.2rem;
      color: #333333;
      line-height: 0.26rem;
      font-style: normal;
    }
  }
}

.wk-grid-item .grid-content,
.crm-grid-item .grid-content {
  cursor: pointer;
  background: #ffffff;
  border-radius: 8px;
  padding: 0.45rem 0.4rem;
  box-sizing: border-box;
  font-size: 0.24rem;
  color: #666666;
  line-height: 24px;
  text-align: right;
  font-style: normal;
  span {
    margin-left: 0.2rem;
  }
  img {
    width: 33px;
    height: 33px;
  }
  span.value {
    font-size: 0.37rem;
    color: #222222;
    line-height: 37px;
    text-align: right;
    font-style: normal;
    flex: 1;
  }
}
.crm-grid-item {
  min-width: 2.5rem;
  padding: 20px 10px;
  box-sizing: border-box;
  background: #fff;
  .grid-content {
    border-radius: 0;
    span {
      font-size: 0.24rem;
      color: #333333;
      line-height: 26px;
      text-align: right;
      font-style: normal;
      margin-right: 0.17rem;
    }
  }
}

.menu {
  display: flex;
  align-items: flex-start;

  // background-color: #fff;
  gap: 20px;
  .grids {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    // margin-left: 10px;
    background-color: #fff;
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.33%;
    height: 150px;
    box-sizing: border-box;
    cursor: pointer;
    .box {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .img {
        margin-bottom: 20px;
        text-align: center;
        width: 30px;
        height: auto;
      }
      .text {
        font-size: 18px;
        color: #666666;
      }
    }
  }

  .content:nth-child(2),
  .content:nth-child(5),
  .content:nth-child(8) {
    border-left: 1px solid #f0f2f5;
    border-right: 1px solid #f0f2f5;
  }

  .content:nth-child(4),
  .content:nth-child(5),
  .content:nth-child(6) {
    border-top: 1px solid #f0f2f5;
    border-bottom: 1px solid #f0f2f5;
  }
}
</style>
